<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;left: -60px;bottom: 0;width: 50px;height: 50px;background-color: #1b1616"></div>  <!--相对于父标签定位，但不一定在父标签内部。-->
    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: #1b1616"></div>
    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;left: 50%;;top: 0;width: 50px;height: 50px;background-color: #1b1616"></div>
    </div>


</body>
</html>